<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=\, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .header{
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
    }
    tr{
      width: 300px;
      display: inline-block;
      display: flex;
      justify-content: space-around;
    }
    .box{
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
      width: 400px;
      height: 500px;
      background: pink;
    }
    .box-txt{
      line-height: 60px;
      padding-left: 30px;
    }
    .box-border{
      margin-left: 30px;
    }
    .box-val{
      float: left;
    }
    .box-click{
      float: left;
    }
    #box-tera{
      width: 300px;
      min-height: 60px;
      border-radius: 4px;
      border: 1px solid blue;
      overflow: hidden;
    }
    .box-name{
      border: 1px solid #eee;
      margin: 3px 10px 3px 5px;
      float: left;
      background: #ccc;
      border-radius: 3px;
      padding: 2px;
      font-size: 14px;
    }
    .box-name span{
      padding: 0 7px;
    }
    .box-jiaose{
      border: 1px solid #ccc;
      width: 100%;
      margin-top: 10px;
      min-height:200px;
      background: #fff;
      z-index: 999;
    }
    .box-top{
      overflow: hidden;
      width: 100%;
      height: 100%;
    }
    .box-top p:nth-of-type(1){
      width: 100px;
      height: 25px;
      margin:8px 10px 10px 20px;
      float: left;
      border: 1px solid #ccc;
      border-radius: 3px;
      color: #ccc;
      font-size: 14px;
      line-height: 25px;
      text-indent: 3px;
    }
    .box-top p:nth-of-type(1) span:nth-of-type(2){
      padding-left: 10px;
    }
    .box-top input{
      width: 150px;
      height: 25px;
      margin:8px 10px 10px 0;
      float: left;
      border: 1px solid #ccc;
      border-radius: 3px;
      color: #ccc;
      font-size: 14px;
      line-height: 25px;
      text-indent: 3px;
    }
    .box-top input::-webkit-input-placeholder {
      color: #ccc;
    }
    .box-xiala{
      width: 100%;
      overflow: hidden;
      /* display: none; */
    }
    .box-xiala p{
      width: 100%;
      height: 25px;
      margin-top: 3px;
      font-size: 14px;
      margin-left: 30px;
      text-indent: 10px;
      line-height: 25px;
    }
    .blue{
      background: blue;
    }
    .btnClick{
      color: red;
    }
    .pos{
      width: 200px;
      height: 40px;
      position: absolute;
      bottom: 50px;
      left: 0;
      right: 0;
      margin: auto;
    }
    .quxiao,.queding{
      width: 60px;
      height: 30px;
      float: left;
      border:1px solid #222;
      border-radius: 3px;
      text-align: center;
      line-height: 30px;
      margin: 0 18px;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <select name="" id="">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
    <button class="tianBtn">添加按钮</button>
    <table>
       <tr class="header">
         <td>客服编号</td>
         <td>姓名</td>
         <td>角色</td>
         <td>操作</td>
       </tr>
    </table>
    <div class="box">
      <p class="box-txt">选择客服</p>
      <p class="box-border">
        <span class="box-val">多选：</span>
        <div class="box-click">
          <div id="box-tera">
            
          </div>
          <!-- 选择角色 -->
          <div class="box-jiaose">
            <div class="box-top">
              <p><span>请选择角色</span><span>x</span></p>
              <input type="text" placeholder="请输入客服编号或姓名">
            </div>
            <!-- 点击出现下拉框 -->
            <div class="box-xiala" style="display:none">
              <p>张三</p>
              <p>李四</p>
              <p>王五</p>
            </div>
          </div>
        </div>
      </p>
      <div class="pos">
        <div class="quxiao">取消</div>
        <div class="queding">确定</div>
      </div>
    </div>
  </div>
  <script>
    $(function(){
      console.log($('select option:selected').val())
      $('.box-top p').click(()=>{
        $('.box-xiala').css('display','block')
      })
      $('.box-xiala p').each(function(i,item){
        $(this).click(()=>{
          var val = $(this).text()
          $(this).toggleClass('blue')
          $('#box-tera').append(
            `
              <span class="box-name">${val}<span class="btnClick">x</span></span>
            `
          )
        })
      })
      // 点击叉删除
      $('#box-tera').on('click','.btnClick',(e)=>{
        var currentLi = e.currentTarget;
        $(currentLi).parent().remove()
      })

      // 点击添加按钮
      $('.tianBtn').click(()=>{
        $('.box').css('display','block')
      })

      // 点击取消
      $('.quxiao').click(()=>{
        $('.box').css('display','none')
      })
      // 点击确定
      $('.queding').click(()=>{
        $('table').append(`
          <tr>
            <td>客服编号</td>
            <td>姓名</td>
            <td>角色</td>
            <td class='remove'>删除</td>
          </tr>
        `)
      })
      // 点击删除按钮删除
      $('table').on('click','.remove',(e)=>{
        var currentLi = e.currentTarget;
        $(currentLi).parent().remove()
      })
    })
  
  </script>
</body>
</html>